import React, { useState,useEffect, useTransition } from 'react'
import {Button, Card,Modal,Form,message,Row,Col,Input,Upload,Select,Tooltip,Table } from 'antd'
import { useNavigate } from 'react-router-dom';
import useCacheAlive from '@/hooks/useCacheAlive'
import MemoTable from '@/components/MemoTable';
import { useTranslation } from 'react-i18next';
import { UploadOutlined } from '@ant-design/icons';  
import {download} from '@/utils/request';
import { listSarm,getSarm,delSarm,tsdelSarm,addSarm,updateSarm,uploadRm1,uploadRm} from "@/api/modules/jnj/rm";
import { upload } from "@/api/modules/common";
import { ProFormColumnsType } from '@ant-design/pro-components'
import RMDetail from './RMDetail'
import { getInfo } from "@/api/login/ssoLogin";

const rm = () => {
  const navigate = useNavigate();
  const { t } = useTranslation()
  const [isModalVisible, setIsModalVisible] = useState(false); 
  const [Title, setTitle] = useState("")  
  const [form] = Form.useForm();  
  const [fileList, setFileList] = useState(null); 
  const [annex, setAnnex] = useState(""); 
  const [serial, setSerial] = useState("");
  const [productTypeBodyPart, setProductTypeBodyPart] = useState("");
  const [isView, SetisView] = useState(false)
  const [isModalVisible2, setIsModalVisible2] = useState(false)
  const [isModalVisible3, setIsModalVisible3] = useState(false)
  const [isModalVisible4, setIsModalVisible4] = useState(false)
  const [onReloadNum, setReloadNum] = useState(null); 
  const [isModalINCIVisible, setIsModalINCIVisible] = useState(false);
  const [rmTableList, setRmTableList] = useState([]); 
  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 用于存储被选中的行的keys  
  const [oldid,setOldid] = useState(null);
  const [visData,setVisData] = useState(false)
  const [viewStatus, setViewStatus] = useState(false); // 加载状态 

    // 使用useEffect在组件挂载时获取数据  
    useEffect(() => {  
      getInfo().then(res=>{
        console.log(res,'res')
        const data = res.data
        data.roles.forEach((item)=>{
          if(item == "Formulator"){
            setViewStatus(true)
          }
        })
      }) 
    }, []); // 空数组意味着这个effect只在组件挂载时运行一次  
  const formColumns:ProFormColumnsType[] = [{
    title: t('sarm.searchCodeName'),
    dataIndex: 'searchValue',
    valueType: 'text', 
  },{
    title:'INCI',
    dataIndex: 'inci',
    valueType: 'text', 
  }, ]

  const columns: any = [
    {
      title: t('sarm.rmNumber'),
      dataIndex: 'rmNumber',
      key: 'rmNumber',
      width: 80,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (rmNumber,record) => {
        // 假设你有一个函数或逻辑来判断ownerAddress是否应该显示为灰色并带有删除线  
        const isGrayedOut = record.status === 'Invisible'; // 或者其他逻辑  
     
        // 设置样式  
        const style = isGrayedOut ? {  
          color: 'gray', // 灰色文本  
          textDecoration: 'line-through', // 删除线  
        } : {}; // 默认样式为空对象  
      
        return (  
          <Tooltip placement="topLeft" title={rmNumber}>  
            <span style={style}>{rmNumber}</span>  
          </Tooltip>  
        ); 
     }
    },
    {
      title: t('sarm.rmName'),
      dataIndex: 'rmName',
      width: 100,
      key: 'rmName',
      ellipsis: {
        showTitle: false,
      },
      render: (rmName,record) => {
        // 假设你有一个函数或逻辑来判断ownerAddress是否应该显示为灰色并带有删除线  
        const isGrayedOut = record.status === 'Invisible'; // 或者其他逻辑  
     
        // 设置样式  
        const style = isGrayedOut ? {  
          color: 'gray', // 灰色文本  
          textDecoration: 'line-through', // 删除线  
        } : {}; // 默认样式为空对象  
      
        return (  
          <Tooltip placement="topLeft" title={rmName}>  
            <span style={style}>{rmName}</span>  
          </Tooltip>  
        ); 
     }
    },
    {
      title: t('sarm.commercialName'),
      dataIndex: 'commercialName',
      width: 120,
      key: 'commercialName',
      ellipsis: {
        showTitle: false,
      },
      render: (commercialName,record) => {
        // 假设你有一个函数或逻辑来判断ownerAddress是否应该显示为灰色并带有删除线  
        const isGrayedOut = record.status === 'Invisible'; // 或者其他逻辑  
     
        // 设置样式  
        const style = isGrayedOut ? {  
          color: 'gray', // 灰色文本  
          textDecoration: 'line-through', // 删除线  
        } : {}; // 默认样式为空对象  
      
        return (  
          <Tooltip placement="topLeft" title={commercialName}>  
            <span style={style}>{commercialName}</span>  
          </Tooltip>  
        ); 
     }
    },
    {
      title: t('sarm.singlePl'),
      dataIndex: 'singlePl',
      width: 80,
      key: 'singlePl',
      ellipsis: {
        showTitle: false,
      },
      render: (singlePl,record) => {
        // 假设你有一个函数或逻辑来判断ownerAddress是否应该显示为灰色并带有删除线  
        const isGrayedOut = record.status === 'Invisible'; // 或者其他逻辑  
     
        // 设置样式  
        const style = isGrayedOut ? {  
          color: 'gray', // 灰色文本  
          textDecoration: 'line-through', // 删除线  
        } : {}; // 默认样式为空对象  
      
        return (  
          <Tooltip placement="topLeft" title={singlePl}>  
            <span style={style}>{singlePl}</span>  
          </Tooltip>  
        ); 
     }
    },
    {
      title: t('sarm.manufactureName'),
      dataIndex: 'manufactureName',
      key: 'manufactureName',
      ellipsis: {
        showTitle: false,
      },
      render: (manufactureName,record) => {
        // 假设你有一个函数或逻辑来判断ownerAddress是否应该显示为灰色并带有删除线  
        const isGrayedOut = record.status === 'Invisible'; // 或者其他逻辑  
     
        // 设置样式  
        const style = isGrayedOut ? {  
          color: 'gray', // 灰色文本  
          textDecoration: 'line-through', // 删除线  
        } : {}; // 默认样式为空对象  
      
        return (  
          <Tooltip placement="topLeft" title={manufactureName}>  
            <span style={style}>{manufactureName}</span>  
          </Tooltip>  
        ); 
     }
    },
    {
      title: t('sarm.distributorName'),
      dataIndex: 'distributorName',
      key: 'distributorName',
      ellipsis: {
        showTitle: false,
      },
      render: (distributorName,record) => {
        // 假设你有一个函数或逻辑来判断ownerAddress是否应该显示为灰色并带有删除线  
        const isGrayedOut = record.status === 'Invisible'; // 或者其他逻辑  
     
        // 设置样式  
        const style = isGrayedOut ? {  
          color: 'gray', // 灰色文本  
          textDecoration: 'line-through', // 删除线  
        } : {}; // 默认样式为空对象  
      
        return (  
          <Tooltip placement="topLeft" title={distributorName}>  
            <span style={style}>{distributorName}</span>  
          </Tooltip>  
        ); 
     }
    },
    {
      title: t('sarm.remark'),
      dataIndex: 'remark',
      key: 'remark',
      width:120,
      ellipsis: {
        showTitle: false,
      },
      render: (remark,record) => {
        // 假设你有一个函数或逻辑来判断ownerAddress是否应该显示为灰色并带有删除线  
        const isGrayedOut = record.status === 'Invisible'; // 或者其他逻辑  
     
        // 设置样式  
        const style = isGrayedOut ? {  
          color: 'gray', // 灰色文本  
          textDecoration: 'line-through', // 删除线  
        } : {}; // 默认样式为空对象  
      
        return (  
          <Tooltip placement="topLeft" title={remark}>  
            <span style={style}>{remark}</span>  
          </Tooltip>  
        ); 
     }
    },
    {
      title: t('sarm.function1'),
      dataIndex: 'function1',
      key: 'function1',
      ellipsis: {
        showTitle: false,
      },
      render: (function1,record) => {
        // 假设你有一个函数或逻辑来判断ownerAddress是否应该显示为灰色并带有删除线  
        const isGrayedOut = record.status === 'Invisible'; // 或者其他逻辑  
     
        // 设置样式  
        const style = isGrayedOut ? {  
          color: 'gray', // 灰色文本  
          textDecoration: 'line-through', // 删除线  
        } : {}; // 默认样式为空对象  
      
        return (  
          <Tooltip placement="topLeft" title={function1}>  
            <span style={style}>{function1}</span>  
          </Tooltip>  
        ); 
     }
    },
    {  
      title: t('action'),  
      key: 'action',
      fixed:'right',
      render: (text, record) => (  
        <>  
           <Button type="link"  onClick={() => handleView(record)}>  
           {t('view')}  
          </Button> 
          {viewStatus ? null : (
            <>
              <Button type="link" onClick={() => handleEdit(record)}>  
              {t('edit')}  
              </Button>  
              {/* 使用三元运算符来判断显示哪个按钮 */}  
              {record.status === 'Invisible' ? (  
                <Button type="link" danger onClick={() => handleRecover(record.id)}>  
                  {t('recover')}  
                </Button>  
              ) : (  
                <Button type="link" danger onClick={() => handleDelete(record.id)}>  
                  {t('delete')}  
                </Button>  
              )} 
            </>
          )}
           
        </>  
      ),  
    },  
  ];


  const getData = async (formData) => {
    if(visData==false){
      const { success, data} = await listSarm({...formData, orderByColumn: 'id',status:'default', order: 0,isAsc:'desc'})
      if(!success) return false
      console.log(data,'data')
      const list2 = data.rows
      return {
        data: list2,
        total: data.total
      }
    }else{
      const { success, data} = await listSarm({...formData, orderByColumn: 'id',status:'', order: 0,isAsc:'desc'})
      if(!success) return false
      console.log(data,'data')
      const list2 = data.rows
      return {
        data: list2,
        total: data.total
      }
    }
   
  } 

  const handleAdd = () =>{
    // SetisView(false)
    // form.resetFields()
    // setTitle("新增/New")
    // showModal()
    navigate(`/rmWording/editrm?isView=0`); 
  }

  const handleExport = () =>{
    download("/safety/sarm/exportRmTemplate", {
 
    }, `RmTemplate_${new Date().getTime()}.xlsx`);
  }

  const showModal = () => {  
    setIsModalVisible(true);  
  };  

  
  const handleOk = () => {  
    // 调用接口添加数据，这里假设你有一个函数addFormData来处理添加逻辑  
    // const response = addFormData(newFormData);  
    // ...处理接口响应...  
    const values = form.getFieldsValue();  
   

  
    // 根据需要更新formData或执行其他逻辑  
    // ...  
  };  

  const handleInci = (record) =>{
    console.log('编辑当前行数据：', record);
    const serial = record.serial;  
    const annex = record.annex
    setSerial(record.serial)
    setAnnex(record.annex)
    setProductTypeBodyPart(record.productTypeBodyPart)
    setIsModalINCIVisible(true)
    // 跳转到'/sa/addreport'路径，并带上id参数  
    // navigate(`/safety/children?serial=${serial}&annex=${annex}`); 
    
  }

  const handleView = (record) =>{
    navigate(`/rmWording/editrm?id=`+record.id +'&isView=1');
  }

  const handleEdit = (record) =>{
    navigate(`/rmWording/editrm?id=`+record.id +'&isView=0');
    // 这里可以添加打开模态框并显示编辑表单的逻辑  
  }

  const handleEdit2 = (record) =>{
    console.log(record,'record')
    setOldid(record)
    setIsModalVisible4(true)
  }

  const handleDelete2 = (id) =>{
    setRmTableList(rmTableList.filter((row) => row.id !== id));  
  }

  const handleDelete = (key) =>{
    let inciIds = []
    const form = {id:key,status:'Invisible',confirm:''}
    inciIds.push(key)
    Modal.confirm({  
      title: 'Confirm Delete',  
      content: t('rmDeleteWord'),  
      onOk() {  
        tsdelSarm(form).then(response=>{
          console.log(response,'res')
          if(response.data.msg == '操作成功'){
            const newform = {id:key,status:'Invisible',confirm:'Y'}
            tsdelSarm(newform).then(res=>{
                message.success("Success")
                setReloadNum(Date.now())
            }) 
          }else{
            Modal.confirm({ 
              title: 'Confirm Delete',  
              content: t('rmDeleteWord2'),  
              onOk() {  
                const newform2 = {id:key,status:'Invisible',confirm:'Y'}
                tsdelSarm(newform2).then(res=>{
                    message.success("Success")
                    setReloadNum(Date.now())
                }) 
              }
            })
          }
        })

      },  
    }); 


  }

  const handleRecover = (key) =>{
    let inciIds = []
    const form = {id:key,status:' '}
    inciIds.push(key)
    tsdelSarm(form).then(res=>{
      message.success("Success")
      setReloadNum(Date.now())
  }) 
  }
  

  const handleINCICancel = () => {  
    setIsModalINCIVisible(false);  
  };  
  
  const handleCancel = () => {  
    setIsModalVisible(false);  
  };  

  const handleImport= () =>{
    setIsModalVisible2(true)
  }

  const handleFileChange = (info) => { 
    console.log(info,'info')
    info.file.status = "done"
    const file = info.fileList[0].originFileObj
    setFileList(file)

  };  

  const columnsRM :any =[
    {
      title: t('sarm.rmName'),
      dataIndex: 'rmName',
      key: 'rmName',
      width: 80,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (rmName) => (
        <Tooltip placement="topLeft" title={rmName}>
          {rmName}
        </Tooltip>
      ),
    },
    {
      title: t('sarm.rmNumber'),
      dataIndex: 'rmNumber',
      key: 'rmNumber',
      width: 80,
      fixed:'left',
      ellipsis: {
        showTitle: false,
      },
      render: (rmNumber) => (
        <Tooltip placement="topLeft" title={rmNumber}>
          {rmNumber}
        </Tooltip>
      ),
    },
    {
      title: t('sarm.commercialName'),
      dataIndex: 'commercialName',
      key: 'commercialName',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (commercialName) => (
        <Tooltip placement="topLeft" title={commercialName}>
          {commercialName}
        </Tooltip>
      ),
    },
    {
      title: t('ing.inciCn'),
      dataIndex: 'inciCn',
      key: 'inciCn',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (text, record) => (  
        <div>  
          {Array.isArray(record.rmInciList) && record.rmInciList.length > 0 &&(record.rmInciList.map((item, index) => (  
            <Tooltip key={index} placement="topLeft" title={item.inci.inciCn}>  
              <div>  
                {item.inci.inciCn}  
              </div>  
            </Tooltip>  
          )))}  
        </div>  
      ), 
    },
    {
      title: t('ing.inciUs'),
      dataIndex: 'inciUs',
      key: 'inciUs',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (text, record) => (  
        <div>  
          {Array.isArray(record.rmInciList) && record.rmInciList.length > 0 &&(record.rmInciList.map((item, index) => (  
            <Tooltip key={index} placement="topLeft" title={item.inci.inciUs}>  
              <div>  
                {item.inci.inciUs}  
              </div>  
            </Tooltip>  
          )))}  
        </div>  
      ),  
    },
    {
      title: t('sarm.mainSupplement'),
      dataIndex: 'mainSupplement',
      key: 'mainSupplement',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (text, record) => (  
        <div>  
          {Array.isArray(record.rmInciList) && record.rmInciList.length > 0 &&(record.rmInciList.map((item, index) => (  
            <Tooltip key={index} placement="topLeft" title={item.mainSupplement}>  
              <div>  
                {item.mainSupplement}  
              </div>  
            </Tooltip>  
        )))}  
        </div>  
      ), 
    },
    {
      title: t('percentage'),
      dataIndex: 'percentage',
      key: 'percentage',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (text, record) => (  
        <div>  
          {Array.isArray(record.rmInciList) && record.rmInciList.length > 0 &&(record.rmInciList.map((item, index) => (  
            <Tooltip key={index} placement="topLeft" title={item.percentage}>  
              <div>  
                {item.percentage}  
              </div>  
            </Tooltip>  
          )))}  
        </div>  
      ), 
    },
    {
      title:'已存在原料',
      dataIndex: 'exitFlag',
      key: 'exitFlag',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (exitFlag) => (
        <Tooltip placement="topLeft" title={exitFlag}>
          {exitFlag}
        </Tooltip>
      ),
    },
    {
      title:'原料是否被使用',
      dataIndex: 'used',
      key: 'used',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (used) => (
        <Tooltip placement="topLeft" title={used}>
          {used}
        </Tooltip>
      ),
    },
    {
      title: t('sarm.function1'),
      dataIndex: 'function1',
      key: 'function1',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (function1) => (
        <Tooltip placement="topLeft" title={function1}>
          {function1}
        </Tooltip>
      ),
    },
    {
      title: t('rmRinse'),
      dataIndex: 'rmRinse',
      key: 'rmRinse',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (text, record) => (  
        <div>  
          {Array.isArray(record.safetyRmWordingList) && record.safetyRmWordingList.length > 0 &&(record.safetyRmWordingList.map((item, index) => (  
              <div>  
              {item.productType === '淋洗' ? ( 
                <Tooltip key={index} placement="topLeft" title={item.wordingCn}> 
                  <span>{item.wordingCn}</span>  
                </Tooltip>  
              ) : null}  
      
              </div>  

          )))}  
        </div>  
      ), 
    },
    {
      title: t('rmLeave'),
      dataIndex: 'rmLeave',
      key: 'rmLeave',
      width: 80,
      ellipsis: {
        showTitle: false,
      },
      render: (text, record) => (  
        <div>  
          {Array.isArray(record.safetyRmWordingList) && record.safetyRmWordingList.length > 0 &&(record.safetyRmWordingList.map((item, index) => (  
              <div>  
              {item.productType === '驻留' ? (  
                   <Tooltip key={index} placement="topLeft" title={item.wordingCn}> 
                   <span>{item.wordingCn}</span>  
                 </Tooltip> 
              ) : null}  
              </div>  
          )))}  
        </div>  
      ),
    },
    {  
      title: t('action'),  
      key: 'action',
      fixed:'right',
      render: (text, record) => (  
        <>  
             {viewStatus ? null : (
            <>
                <Button type="link" onClick={() => handleEdit2(record)}>  
                {t('edit')}  
                </Button>  
                <Button type="link" danger onClick={() => handleDelete2(record.id)}>  
                {t('delete')}   
                </Button>  
            </>
          )}
        
        </>  
      ),  
    },  
  ]

  //提交
  const handleOKImport = () =>{
    var formData = new FormData();
    formData.append("file", fileList);
    uploadRm(formData).then(res=>{
      console.log(res,'res')
      let data = res.data.data
      for(let i =0;i<data.length;i++){
        if(data[i].id == null || data[i].id == undefined || data[i].id == ""){
          data[i].id = -i
        }
      }
      message.success("success")
      setRmTableList(data)
      setIsModalVisible2(false)
      setIsModalVisible3(true)
      let arr = []
      data.map(i=>{
        i.key = i.id
        arr.push(i.id)
      })
      setSelectedRowKeys(arr)
    })
  }

  const handleClickRm = (e,data) =>{

    if(e == 'cancel'){
      setIsModalVisible4(false)
    }else{
      data.safetyRmInciList.map(i=>{
           i.inci={inciCn:i.inciCn,inciUs:i.inciUs}
      })
      let updatedRmTableList =[]
      rmTableList.map(item => {  
        // 如果当前对象的 id 与 data 的 id 匹配，则返回新的 data 对象  
        if (item.id === data.id) {  
          data.rmInciList=data.safetyRmInciList
          updatedRmTableList.push(data) // 返回新的对象引用  
        }else{
           // 如果不匹配，返回原始对象  
          updatedRmTableList.push(item) 
        }  
       
      });  
      console.log(updatedRmTableList,'updatedRmTableList')
      setRmTableList(updatedRmTableList)

      setIsModalVisible4(false)
      let arr = []
      updatedRmTableList.map(i=>{
        i.key = i.id
        arr.push(i.id)
      })
      setSelectedRowKeys(arr)
    }
  }

  const showAllData = () =>{
    setVisData(true)
    setReloadNum(Date.now())
  }

  const showNoAllData = () =>{
    setVisData(false)
    setReloadNum(Date.now())
  }
  const renderOperator = <>
    <Button type="primary" size="small" onClick={handleAdd} disabled={viewStatus}>{t('add')}</Button>
    <Button type="primary" style={{marginLeft:'1%'}} disabled={viewStatus} size="small" onClick={handleImport}>{t('import')}</Button>
    <Button style={{marginLeft:'1%'}} type="primary"  size="small" onClick={showAllData}>{t('allData')}</Button>
    <Button style={{marginLeft:'1%'}} type="primary"  size="small" onClick={showNoAllData}>{t('nonInvisibleData')}</Button>
    <Button style={{marginLeft:'1%'}} size="small" onClick={handleExport}>{t('templateDownload')}</Button>
  </>

  // 当选中行发生变化时触发  
  const handleRowSelectChange = (selectedKeys, selectedRows) => {  
    setSelectedRowKeys(selectedKeys);  
    // 这里可以打印或处理被选中的行数据 selectedRows  
    console.log(selectedRowKeys,'selectedRowKeys')
  };  
  
  // 当你点击某个按钮时，获取被选中的行数据  
  const handleButtonClick = () => {  
    let data =[]
    selectedRowKeys.map(k=>{
       rmTableList.map(i=>{
          if(k==i.id){
             data.push(i)
          }
       })
    })
    
    let result = [];  
       for (let i = 0; i < data.length; i += 200) {  
         result.push(data.slice(i, i + 200));  
       }   
    console.log(result,'result')
    result.map(i=>{
       uploadRm1(i).then(res=>{
        message.success('success')
        setIsModalVisible3(false)
        setReloadNum(Date.now())
       })
    })
  };  
  
  return (
    <div> 
    <MemoTable 
      name='basic'
      formColumns={formColumns}
      columns={columns as any}
      rowKey='id'
      operator={renderOperator}
      getData={getData}
      refreshKey={onReloadNum}
    />
    <Modal  
          title={Title}
          visible={isModalVisible}  
          onOk={handleOk}  
          onCancel={handleCancel}  
        >  
          <Form form={form} layout="vertical">
            <Form.Item  
                name="id"  
                label="id" 
                hidden 
            >  
                <Input disabled/>  
            </Form.Item> 
            {/* 这里假设添加的内容也是一个对象，包含key和value */}  
            <Form.Item  
              name="annex"  
              label={t('rm.annex')}
              rules={[{ required: true, message: '请输入附表！' }]}    
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
            <Form.Item  
              name="serial"  
              label={t('rm.serial')}
              rules={[{ required: true, message: '请输入序号！' }]}    
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
            <Form.Item  
              name="chemicalNameCn"  
              label={t('rm.chemicalNameCn')}  
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
            <Form.Item  
              name="chemicalNameEn"  
              label={t('rm.chemicalNameEn')}  
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
            <Form.Item  
              name="productTypeBodyPart"  
              label={t('rm.productTypeBodyPart')}  
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
            <Form.Item  
              name="maxConcentration"  
              label={t('rm.maxConcentration')}  
            >  
              <Input disabled={isView}/>  
            </Form.Item>
            <Form.Item  
              name="other"  
              label={t('rm.other')}  
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
            <Form.Item  
              name="wordConditionUseWarning"  
              label={t('rm.wordConditionUseWarning')}  
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
            <Form.Item  
              name="color"  
              label={t('rm.color')}  
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
            <Form.Item  
              name="annexDetailDesc"  
              label={t('rm.annexDetailDesc')}  
            >  
              <Input disabled={isView}/>  
            </Form.Item>  
          </Form>  
        </Modal> 
        <Modal  
          title='Import'
          visible={isModalVisible2}  
          onOk={handleOKImport}  
          onCancel={()=>{setIsModalVisible2(false)}} 
          destroyOnClose 
        >  
             <Upload  
                customRequest={({ file, onSuccess, onError }) => {  
                  // 这里是自定义上传逻辑，您可以根据实际需求实现上传逻辑  
                  // 例如，使用axios发送POST请求上传文件  
                  // 注意：这里的逻辑与表单提交时的文件上传是独立的，如果只需要在表单提交时上传，可以省略这部分  
                }}  
                onChange={handleFileChange} 
              >  
                <Button icon={<UploadOutlined />}>{t('selectUpload')}</Button>  
              </Upload> 
        </Modal> 
        <Modal  
          title='Import Result'
          visible={isModalVisible3}  
          onOk={handleButtonClick}  
          onCancel={()=>{setIsModalVisible3(false)}}  
          width={1200}
          destroyOnClose
        >  
          <span style={{color:'red'}}>*注意：覆盖是根据原料编码进行判断的,勾选需要导入的原料，点击确认后导入。表格有两列标识，一列为原料是否已存在库里，一列为该原料是否已经被使用</span><br/>
          <Table  
           rowSelection={{  
            selectedRowKeys,  
            onChange: handleRowSelectChange,  
            type: 'checkbox', // 使用多选框  
          }}  
          dataSource={rmTableList}  
          columns={columnsRM} 
          pagination={false}
        />  
        </Modal> 
        <Modal  
          title='Detail'
          visible={isModalVisible4}  
          onCancel={()=>{setIsModalVisible4(false)}}  
          width={1000}
          destroyOnClose
          footer={null}
        >  
         <RMDetail onUploadSuccess={handleClickRm} oldid={oldid}/>
        </Modal> 
    </div>
  )
}
export default rm
